import React from 'react'
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
} from '@ant-design/icons';
import { Layout, Button, theme, Dropdown, Tag, Avatar } from 'antd';
import { DownOutlined, SmileOutlined } from '@ant-design/icons';
import { UserOutlined } from '@ant-design/icons';
import { withRouter } from 'react-router-dom/cjs/react-router-dom.min';
// import { Dropdown, Space } from 'antd';
const { Header } = Layout;


function TopHeader(props) {
  const { role: { roleName }, username } = JSON.parse(localStorage.getItem("token"))

  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  const items = [
    {
      key: '1',
      label: (
        <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
          {roleName}
        </a>
      ),
    },
    {
      key: '4',
      danger: true,
      label: <a onClick={(e) => {
        e.preventDefault()
        localStorage.removeItem("token")
        props.history.replace("/login")
      }}>退出登录</a>,
    },
  ];

  return (
    <Header style={{ padding: 0, background: colorBgContainer }}>
      <Button
        type="text"
        icon={props.collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
        onClick={() => props.setCollapsed(!props.collapsed)}
        style={{
          fontSize: '16px',
          width: 64,
          height: 64,
        }}
      />

      <div style={{ float: "right" }}>
        <span>欢迎<span style={{ color: "#1890ff" }}>{username}</span >回来</span>

        <Dropdown menu={{ items }}>
          <a onClick={(e) => e.preventDefault()}>
            <Avatar size="large" icon={<UserOutlined />} />
          </a>
        </Dropdown>

      </div>
    </Header>
  )
}

export default withRouter(TopHeader)